<div *ngIf="!loading">
  <ng-container *ngIf="project.permissions.writable">
      <h3>
          {{ 'project_variable_form_title' | translate }}
      </h3>
      <app-variable-form (createVariableEvent)="variableEvent($event)" [loading]="varFormLoading"></app-variable-form>
  </ng-container>
  <div>
      <h3>
          {{ 'project_variable_list_title' | translate }}
      </h3>
      <app-variable [project]="project" [variables]="project.variables" [mode]="project.permissions.writable? 'edit': 'ro'" (event)="variableEvent($event)" auditContext="project"></app-variable>
  </div>
</div>
<nz-spin *ngIf="loading" nzTip="Loading variables..."></nz-spin>
